<template>
  <div>
    <!-- 动态内容区域 -->
    <Content v-if="currentFile" :file="currentFile" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFile: '',
      fileList: [],
      checkInterval: null
    }
  },
  async mounted() {
    // 初始加载文件列表
    await this.fetchFileList()
    // 定时检查更新（每30秒）
    this.checkInterval = setInterval(() => {
      this.fetchFileList(true)
    }, 30000)
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.checkInterval)
  },
  methods: {
    async fetchFileList(shouldUpdate = false) {
      try {
        // 实际项目中应从后端接口获取文件列表
        const response = await fetch('/file-list.json')
        const newFileList = await response.json()
        
        // 检查是否有新增文件
        const hasNewFiles = newFileList.some(file => 
          !this.fileList.includes(file)
        )
        
        if (hasNewFiles || shouldUpdate) {
          this.fileList = newFileList
          // 更新路由
          this.updateRoutes()
        }
      } catch (error) {
        console.error('Failed to fetch file list:', error)
      }
    },
    updateRoutes() {
      // 动态添加路由
      this.fileList.forEach(file => {
        const routePath = `/${file.replace('.md', '')}`
        if (!this.$router.options.routes.some(r => r.path === routePath)) {
          this.$router.addRoute({
            path: routePath,
            component: () => import(`../../docs/${file}`)
          })
        }
      })
    }
  }
}
</script>
    